<template>
  <view class="container">
    <!-- 选择入园日期 -->
    <view class="date-section">
      <view class="section-title">选择入园日期</view>
      <view class="calendar">
        <view class="month">{{ currentYear }}.{{ currentMonth }}</view>
        <view class="date-grid">
          <view v-for="(item, index) in dateList" :key="index"
                :class="['date-item', { 'selected': selectedDate === item.date, 'disabled': item.status === '已约满', 'rest': item.status === '闲时' && selectedDate !== item.date, 'rest-selected': item.status === '闲时' && selectedDate === item.date }]"
                @click="selectDate(item)">
            <view class="week">{{ item.week }}</view>
            <view class="day">{{ item.day }}</view>
            <view class="status">{{ item.status }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 选择入园时段 -->
    <view class="time-section">
      <view class="section-title">选择入园时段</view>
      <view class="time-grid">
        <view v-for="(slot, index) in timeSlots" :key="index"
              :class="['time-item', { 'selected': selectedTime === slot.time, 'disabled': slot.status === '已约满' }]"
              @click="selectTime(slot)">
          {{ slot.time }} <text class="status-text">{{ slot.status }}</text>
        </view>
      </view>
    </view>

    <!-- 确认按钮 -->
    <view class="footer">
      <button class="confirm-button" @click="confirmSelection">时段确认</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentYear: new Date().getFullYear(), // 当前年份
      currentMonth: new Date().getMonth() + 1, // 当前月份
      selectedDate: '', // 已选择的日期
      selectedTime: '', // 已选择的时段
      dateList: [
        { day: '01', week: '周六', status: '已约满', date: '2024-09-01' },
        { day: '02', week: '周日', status: '闲时', date: '2024-09-02' },
        { day: '03', week: '周一', status: '闲时', date: '2024-09-03' },
        { day: '04', week: '周二', status: '闲时', date: '2024-09-04' },
        { day: '05', week: '周三', status: '闲时', date: '2024-09-05' },
        { day: '06', week: '周四', status: '已约满', date: '2024-09-06' },
        { day: '07', week: '周五', status: '已约满', date: '2024-09-07' },
        { day: '08', week: '周六', status: '已约满', date: '2024-09-08' },
        { day: '09', week: '周日', status: '已约满', date: '2024-09-09' },
        { day: '10', week: '周一', status: '闲时', date: '2024-09-10' },
        { day: '11', week: '周二', status: '闲时', date: '2024-09-11' },
        { day: '12', week: '周三', status: '已约满', date: '2024-09-12' },
        { day: '13', week: '周四', status: '闲时', date: '2024-09-13' },
        { day: '14', week: '周五', status: '已约满', date: '2024-09-14' },
      ],
      timeSlots: [
        { time: '09:00-11:00', status: '已约满' },
        { time: '11:00-13:30', status: '已约满' },
        { time: '13:30-16:00', status: '余4' }
      ],
    };
  },
  methods: {
    goBack() {
      uni.navigateBack(); // 返回上一页
    },
    selectDate(item) {
      if (item.status !== '已约满') {
        this.selectedDate = item.date; // 选择日期
      }
    },
    selectTime(slot) {
      if (slot.status !== '已约满') {
        this.selectedTime = slot.time; // 选择时段
      }
    },
    confirmSelection() {
      if (!this.selectedDate || !this.selectedTime) {
        uni.showToast({
          title: '请选择日期和时段',
          icon: 'none'
        });
        return;
      }
      uni.showToast({
        title: '预约成功',
        icon: 'success'
      });
      uni.navigateTo({
        url: `/pages/yuyue/team-yuyue?selectedDate=${this.selectedDate}&selectedTime=${this.selectedTime}`,
      });
    }
  }
};
</script>

<style scoped>
/* 全局容器 */
.container {
  padding: 0;
  background-color: #f5f5f5;
  height: 100%;
}

/* 顶部导航栏样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.nav-bar {
  display: flex;
  align-items: center;
}

.nav-title {
  font-size: 18px;
  margin-left: 10px;
  color: #333;
}

/* 日期选择部分 */
.date-section, .time-section {
  margin-top: 20px;
  padding: 10px;
  background-color: white;
  border-radius: 8px;
}

.section-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
}

.calendar, .time-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.date-grid {
  display: flex;
  flex-wrap: wrap;
}

.date-item {
  width: 9%; /* 一行7个 */
  text-align: center;
  padding: 8px; /* 缩小内边距 */
  border-radius: 8px;
  margin-bottom: 8px; /* 减少下方的间距 */
  background-color: #fff;
  cursor: pointer;
  border: 1px solid transparent;
}

/* 初始状态为白色，选中后为浅绿色 */
.date-item.rest {
  background-color: #fff; /* 闲时状态下的白色背景 */
  color: #333;
}

.date-item.rest-selected {
  background-color: #d4edda; /* 选中的浅绿色 */
  color: white;
}

.date-item.selected {
  background-color: #8DCB6D;
  color: white;
  border: 1px solid #8DCB6D;
}

.date-item.disabled {
  background-color: #e0e0e0;
  color: #999;
}

.week {
  font-size: 12px;
  color: #666;
}

.day {
  font-size: 14px; /* 调整字体大小 */
  font-weight: bold;
  color: #333;
}

.status {
  font-size: 10px; /* 缩小状态文字的字体 */
  color: #b0b0b0;
}

/* 时段选择部分 */
.time-item {
  width: 100%;
  text-align: center;
  padding: 8px; /* 缩小内边距 */
  margin-bottom: 8px; /* 减少间距 */
  border-radius: 8px;
  background-color: #f5f5f5;
  cursor: pointer;
  font-size: 14px; /* 缩小字体 */
}

.time-item.selected {
  background-color: #8DCB6D;
  color: white;
}

.time-item.disabled {
  background-color: #e0e0e0;
  color: #999;
}

.status-text {
  font-size: 12px; /* 缩小状态文字的字体 */
  color: #666;
}

/* 底部按钮 */
.footer {
  margin-top: 20px;
  padding: 10px;
  text-align: center;
}

.confirm-button {
  width: 100%;
  padding: 12px; /* 缩小按钮的内边距 */
  border-radius: 30px;
  background-color: #8DCB6D;
  color: white;
  font-size: 16px;
  font-weight: bold;
}
</style>
